import React, {Component} from 'react'
import { Table, Button, Modal, Spin, Transfer, Pagination, Radio } from 'antd'
import EditableInputCell from './EditableInputCell'
import EditableDateCell from './EditableDateCell'
import { connect } from 'dva'
import { clone } from '../../../../util/utils'
import moment from 'moment'
import styles from './css/UserContent.css'

function renderInputCell(dispatch, text, record, column, type) {
	return <EditableInputCell 
			editable={record.editable} 
			value={text} 
			type={type} 
			onChange={e => {
				dispatch({
					type: 'user/editRecord',
					record: record,
					key: column,
					value: e.target.value
				})
			}} />
}

function renderDateCell(dispatch, text, record, column) {
	return <EditableDateCell 
			value={text}
			editable={record.editable} 
			onChange={(date, dateString) => {
				dispatch({
					type: 'user/editRecord',
					record: record,
					key: column,
					value: date.valueOf()
				})
			}} />
}

function renderRadioCell(dispatch, text, record, column) {
	let v
	switch (record.sex){
		case '男':
			v = 0
			break;
		case '女':
			v = 1
			break;
	}
	return (
		<div>
		{
			record.editable ? 
			<Radio.Group 
				value={v}
				onChange={e => {
					dispatch({
						type: 'user/editRecord',
						record: record,
						key: column,
						value: e.target.value
					})
				}} 
			>
		        <Radio value={0}>男</Radio>
		        <Radio value={1}>女</Radio>
	      	</Radio.Group>
	      	:
	      	text
		}
      	</div>
	)
}

function buildColumns({state, dispatch}) {
	return [
		{
		  	title: '用户id',
		  	dataIndex: 'userId',
		  	key: 'userId',
		  	width: 230,
		}, 
		{
		  	title: '头像id',
		  	dataIndex: 'avatarId',
		  	key: 'avatarId',
		  	width: 230,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'avatarId', 'number'),
		}, 
		{
		  	title: '用户名',
		  	dataIndex: 'username',
		  	key: 'username',
		  	width: 230,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'username'),
		}, 
		{
		  	title: '邮箱',
		  	dataIndex: 'email',
		  	key: 'email',
		  	width: 230,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'email'),
		}, 
		{
		  	title: '手机号',
		  	dataIndex: 'mobilePhone',
		  	key: 'mobilePhone',
		  	width: 230,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'mobilePhone', 'number'),
		}, 
		{
		  	title: '身份证',
		  	dataIndex: 'idCard',
		  	key: 'idCard',
		  	width: 230,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'idCard'),
		}, 
		{
		  	title: '昵称',
		  	dataIndex: 'nickname',
		  	key: 'nickname',
		  	width: 230,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'nickname'),
		}, 
		{
		  	title: '真实姓名',
		  	dataIndex: 'realName',
		  	key: 'realName',
		  	width: 230,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'realName'),
		}, 
		{
		  	title: '性别',
		  	dataIndex: 'sex',
		  	key: 'sex',
		  	width: 160,
		  	render: (text, record) => renderRadioCell(dispatch, text, record, 'sex'),
		}, 
		{
		  	title: '出生时间',
		  	dataIndex: 'birthTime',
		  	key: 'birthTime',
		  	width: 160,
		  	render: (text, record) => renderDateCell(dispatch, text, record, 'birthTime'),
		}, 
		{
		  	title: '创建时间',
		  	dataIndex: 'createTime',
		  	key: 'createTime',
		  	width: 230,
		}, 
		{
		  	title: '更新时间',
		  	dataIndex: 'updateTime',
		  	key: 'updateTime',
		  	width: 230,
		}, 
		{
		  	title: '用户状态',
		  	dataIndex: 'status',
		  	key: 'status',
		  	width: 150,
		  	render: (text, record) => renderInputCell(dispatch, text, record, 'status'),
		}, 
		{
			title: '操作',
			dataIndex: 'op',
		  	key: 'op',
		  	width: 150,
		  	fixed: 'right',
		  	render: (text, record) => {
		  		if (record.editable) {
		  			return (
					    <div>
					    	<a 
					    	onClick={() => {
					    		dispatch({
					    			type: 'user/save',
					    			key: record.key
					    		});
					    	}}>
					    		保存
					    	</a>
					    	&nbsp;&nbsp;
					    	<a
				    		onClick={() => {
					    		dispatch({
					    			type: 'user/cancel',
					    			record
					    		});
					    	}}>
				    			取消
				    		</a>
					    </div>
					)
		  		} else {
		  			return (
					    <div>
					    	<a 
					    	onClick={() => {
					    		dispatch({
					    			type: 'user/edit',
					    			record
					    		});
					    	}}>
					    		修改
					    	</a>
					    	&nbsp;&nbsp;
					    	<a 
					    	onClick={() => {
					    		dispatch({
					    			type: 'user/showGrant',
					    			userId: record.userId,
					    			visible: true
					    		})
					    	}}>
					    		角色
					    	</a>
					    	&nbsp;&nbsp;
				    		<a onClick={() => {
				    			Modal.confirm({
				    				title: '确认删除用户' + record.userId,
				    				cancelText: '取消',
				    				okText: '确认',
				    				okType: 'danger',
				    				onOk() {
								    	dispatch({
							    			type: 'user/remove',
							    			userId: record.userId
							    		});
								    }
				    			})
				    		}}>
				    			删除
				    		</a>
					    </div>
					)
		  		}
		  	},
		}
	]
}

class UserContent extends Component {
	
	render() {
		let {state, dispatch} = this.props
		let {list, loading, pageNum, pageSize, total, visible, left, right} = state;
		
		let dataSource = list || [];
		// 必须先进性克隆
		dataSource = clone(dataSource)
		
		// 字段整理
		for (let data of dataSource) {
			if (data.birthTime)
				data.birthTime = moment(data.birthTime).format('YYYY-MM-DD')
			if (data.createTime)
				data.createTime = moment(data.createTime).format('YYYY-MM-DD HH:mm:ss')
			if (data.updateTime)
				data.updateTime = moment(data.updateTime).format('YYYY-MM-DD HH:mm:ss')
			if (data.sex != undefined)
				data.sex = data.sex == 0 ? '男' : '女'
			if (data.avatar)	
				data.avatarId = data.avatar.fileId
			data.status = data.status == 0 ? '默认' : data.status == 1 ? '删除' : '锁定'
		}
		
		let columns = buildColumns({state, dispatch})
		return (
			<Spin spinning={loading} delay={500} size='large'>
				<Modal 
				closable={false}
				width={730} 
				visible={visible} 
				okText='修改' 
				cancelText='返回'
				onCancel={() => {
					dispatch({
		    			type: 'user/showGrant',
		    			visible: false
		    		})
				}} 
				onOk={() => {
					dispatch({
		    			type: 'user/saveGrant'
		    		})
				}}>
					<Transfer
				        dataSource={left}
				        targetKeys={right}
				        showSearch
				        listStyle={{
				          	width: 300,
				          	height: 300,
				        }}
				        operations={['添加', '删除']}
				        onChange={(targetKeys, direction, moveKeys) => {
				        	dispatch({
				    			type: 'user/setRight',
				    			right: targetKeys
				    		})
				        }}
				        render={item => `${item.title}`}
					/>
				</Modal>
				<div className={styles.opContainer}>
					<Button onClick={() => {
						dispatch({type: 'user/add'})
					}}>
						添加
					</Button>
				</div>
				<Table 
					dataSource={dataSource} 
					columns={columns} 
					scroll={{x: 2300, y: 700}} 
					pagination={{
						current: pageNum,
						pageSize,
						total,
						onChange: (pageNum, pageSize) => {
							dispatch({type: 'user/setPage', pageNum, pageSize})
							dispatch({type: 'user/pageUser', pageNum, pageSize})
						}
					}}
				/>
			</Spin>
		)
	}
	
	componentDidMount() {
		this.props.dispatch({type: 'user/pageUser', pageNum: 1, pageSize: 10})
	}
	
}

export default connect(state => ({
	state: {
		...state.system,
		...state.user,
		loading: state.loading.models.user
	}
}))(UserContent);